<template>
  <div class="DateSwitchingView">
    <span style="margin-right: 10px;margin-top:5px;float: left;color: #e0e9f2;font-size: 11px;">按</span>
    <el-radio-group v-model="type" style="margin-right: 10px;float: left;" @change="setRadioData">
      <el-radio-button label="hour">时</el-radio-button>
      <el-radio-button label="day">日</el-radio-button>
      <el-radio-button label="month">月</el-radio-button>
      <el-radio-button label="year">年</el-radio-button>
    </el-radio-group>
    <span style="margin-right: 5px;margin-top:5px;float: left;color: #e0e9f2;font-size: 11px;">查询：</span>
    <el-date-picker v-if="type=='hour'" class="elDataPicker" @change="setRadioData()"
                    v-model="datehourData"
                    type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"/>
    <el-date-picker v-else-if="type=='day'" class="elDataPicker" @change="setRadioData()"
                    v-model="datedayData"
                    type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
    <el-date-picker v-else-if="type=='month'" class="elDataPicker"
                    @change="setRadioData()"
                    v-model="datemonthData"
                    type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"/>
    <year-range-picker
        v-else-if="type=='year'"
        ref="statisticPicker"
        :labelWidth="50"
        labelText="统计期"
        @updateTimeRange="updateStatisticYear"
        :initYear="dateValue"></year-range-picker>
  </div>
</template>

<script>
import moment from "moment/moment";
import YearRangePicker from "./YearRangePicker.vue";

let component;
export default {
  name: "DateSwitchingComponent",
  components: {YearRangePicker},
  data() {
    return {
      datehourData: [moment().subtract(1, 'days'), moment()],
      datedayData: [moment().subtract(1, 'days'), moment()],
      datemonthData: [moment().subtract(1, 'months'), moment()],
      dateyearData: [moment().subtract(1, 'years').format("yyyy"), moment().format("yyyy")],
      dateValue: {startYear: 2000, endYear: new Date().getFullYear()},
      data: [],
      type: 'month'
    }
  },
  methods: {
    updateStatisticYear(e) {
      this.dateyearData = [e.startYear, e.endYear];
      this.setRadioData()
    },
    setRadioData() {
      let name = "date" + this.type + "Data";
      this.data = this[name];
      this.getData();
    },
    getData() {
      this.$emit("getData", this.data, this.type);
    },
  },
  mounted() {
    component = this;
  }
}
</script>

<style scoped>

</style>